
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo supplier">
        <div class="head">
            <el-form :model="form" class="headForm">

                <el-form-item label="" style="width:155px">
                    <el-select v-model="form.store_ids" clearable placeholder="选择门店">
                        <el-option v-for="(item,a) in storelist" :key="a" :label="item.store_name" :value="item.store_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="" style="width:125px">
                <el-input v-model="form.provider_name" placeholder="供应商名称"></el-input>
                </el-form-item>
                <el-form-item label="" style="width:125px">
                    <el-select v-model="form.provide_status" clearable placeholder="状态">
                        <el-option v-for="(item,a) in inType" :key="a" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

               
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="success" @click="theClick('add')">添加</el-button>
                
            </el-form>
            
        </div> 
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer_SI tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" >
                <!-- 编号	供应商名称	描述	供应门店	状态	更新时间	操作				 -->
                <el-table-column prop="provider_id" label="编号" fixed ></el-table-column>
                <el-table-column prop="provider_name" label="供应商名称" width="300px"> </el-table-column>
                <el-table-column prop="provider_desc" label="描述" ></el-table-column>
                <el-table-column prop="purchase_num" label="供应门店">
                    <template slot-scope="scope">
                        <div v-if="scope.row.stores.length != 0">
                            <p v-for="sitem in scope.row.stores" :key="sitem.store_id">{{sitem.store_name}}</p>   
                        </div>
                        <div v-else>--</div>                  
                    </template>
                </el-table-column>
                <el-table-column prop="provide_status_cn" label="状态"></el-table-column>               
                <el-table-column prop="update_time" label="更新时间"></el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0" >
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
       <!-- 编辑、添加 -->
        <el-dialog :title="supplierTxt" :visible.sync="addalertShow" class="business">
            <el-form ref="form" :model="supparam" label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="supparam.provider_name" type="text"></el-input>
                </el-form-item>    
                <el-form-item label="描述">
                    <el-input v-model="supparam.provider_desc" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio v-model="supparam.provide_status" label="1">正常</el-radio>
                    <el-radio v-model="supparam.provide_status" label="0">挂起</el-radio>
                </el-form-item>
                <el-form-item label="供应门店" resize="none" class="needPosition">
                    <el-input v-model="storename"></el-input>
                    <ul class="searchResult" v-if="searchStorelist.length != 0">
                        <li v-for="sitem in searchStorelist" :key="sitem.store_id" @click="getStore(sitem)">{{sitem.store_name}}</li>
                    </ul>
                    <div style="margin-top:10px" v-if="pshowList.length != 0">
                        <p class="storeListshow" v-for="(pitem,i) in pshowList" :key="i">
                           <span>{{pitem.store_name}}</span> 
                           <span style="color:red" @click="delspan(i)">X</span>
                        </p>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addalertShow = false">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<style lang="scss">
    .supplier{
        .el-dialog{
            .el-dialog__body{
                min-height: 300px;

            }
        } 
    }
  .tabContainer_SI{
      .el-table{
          .cell{
              text-align: center;
          }
      }
  }
</style>
<style lang="less" scoped>
.info{
    margin-top: -20px;
    margin-bottom: 15px;
    margin-left: 120px;
    color: orange;
}
.needPosition{
    position: relative;
    .storeListshow{
        display: flex;
        border:1px solid #ccc;
        border-radius: 2px;
        padding:5px;
        line-height: 30px;
        margin-bottom: 15px;
        font-size:14px;
        justify-content:space-between;
    }  
    .searchResult{
        position: absolute;
        left: 0;
        top:40px;
        width:100%;
        background: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        li{
            padding:5px;
            font-size: 14px;
        }
    }  
}

</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {

    data () {
    return {
        searchparams:'',
        tableData:[],
        total:50,
        size:20,
        form:{size:20,
            page:1
        },
        pageNum:1,
        inType:[
            {status:"",status_cn:"状态"},
            {status:"1",status_cn:"正常"},
            {status:"0",status_cn:"挂起"}

        ],
        limitList:[
            {name:"编辑",url:"edit"},
            {name:"删除",url:"del"},
            
        ],
        supplierTxt:"",
        supparam:{
            provide_status:"1"
        },
        storename:'',
        searchStorelist:[],
        pshowList:[],

        storelist:[],
        addalertShow:false,//弹框控制 
        purchaseParam:{},//弹框内得数据 
        searchgoodsurl:potUrl.itemSearch,
        provider_name:'',
        labelTxt:'dddd'
    }
  }, 
   mounted(){
      let that = this;
      that.getList();
      abc.get(that,potUrl.storesearch,{},(res)=>{
          that.storelist = res.data
      })
  },
  watch:{
      storename(n){
          const that = this;
        if(that.storename == ''){
            that.searchStorelist = []
            return
        }
        abc.get(that,potUrl.storesearch,{store_name:that.storename},(res)=>{
          that.searchStorelist = res.data
        }) 
      },
      addalertShow(){
          const that = this;          
          that.pshowList = []
      }
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.providerlist,that.form,(res)=>{
            console.log(res.data.list.length)
            if(res.data.list.length == undefined){
                var arr = [];
                for (const key in res.data.list) {
                    arr.push(res.data.list[key])
                }
                that.tableData = arr   
            }else{
                that.tableData=res.data.list;
            }
            that.total = res.data.total;
        })//列表
    },
    theClick(a,b){
        const that = this;
        if(a == 'del'){
            //that,url,txt,pars,cb
            abc.twoTips(that,potUrl.providerdel,'确认要删除'+b.provider_name+'供应商吗？',{provider_id:b.provider_id},(res)=>{
                that.getList()
            })
        }else{
            that.addalertShow = true;
            if(a != 'add'){
                that.supplierTxt = '编辑：'+b.provider_name
                abc.get(that,potUrl.providerdetail,{provider_id:b.provider_id},(res)=>{
                    that.supparam = res.data;
                    that.pshowList = res.data.store_list;
                    that.supparam.provide_status = res.data.provider_level
                })
            }else{
                that.supplierTxt = '添加'
            }
            
        }
    },
    comfirm(){
        const that = this;
        var arr = [];
        that.addalertShow = false;
        that.pshowList.map((item)=>{
            arr.push(item.store_id)
           
        })
        that.supparam.store_ids = arr.join(',');
        abc.post(that,potUrl.provideradd,that.supparam,(res)=>{
            that.getList()
        })
    },
    getStore(a){
        //点击模糊搜索到的门店获取信息，放到下面的门店展示中
        const that = this;
        that.pshowList.push(a)
        that.searchStorelist = [];
        that.storename = ''
    },
    delspan(n){
        const that = this;
        that.pshowList.splice(n,1)
    }
  }
}
</script>
